<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--设置视口    -->
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <!--    导入css-->
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <!--    导入3个js,有顺序要求-->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        body{
            background-image: url("images/bg-01.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
    </style>
</head>
<body onload="getList()">
<div class="container">
    <a class="btn btn-primary" href="/login.html">添加进度</a>
    <table class="table  table-striped table-hover">
        <thead>
        <tr>
            <th>姓名</th>
            <th>进度</th>
            <th>日期</th>
        </tr>
        </thead>
        <tbody id="mybody">

        </tbody>

    </table>
    <script>

        function getList() {
            //1.定义xhr
            var xhr=new XMLHttpRequest();
            //4.绑定监听
            xhr.onreadystatechange=function () {
                if (xhr.readyState==4&&xhr.status==200){
                    var result=xhr.responseText;
                    var arr=JSON.parse(result);
                    var html="";
                    for(var i=0;i<arr.length;i++){
                        var show_g="";
                        if(arr[i].gender==1){
                            show_g="男";
                        }else if (arr[i].gender==0){
                            show_g="女";
                        } else {
                            show_g="不祥";
                        };
                        html+=`
                        <tr>
                            <td>${arr[i].uname}</td>
                            <td>${arr[i].ujd}</td>
                            <td>${arr[i].date}</td>
                        </tr>
                        `;
                    }
                    mybody.innerHTML=html;
                }
            }
            //2.打开连接
            xhr.open("get","/userlist",true);
            //3.发送请求
            xhr.send();

        }
    </script>


</div>
</body>
</html>